<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
	<!-- element-ui 的样式表文件 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />

	<style>
		.login_container {
			background: url("/img/3.jpg") center no-repeat;
			/* background-color: #2b4b6b; */
			height: 600px;
		}

		.login_box {
			width: 450px;
			height: 300px;
			background-color: #fff;
			border-radius: 10px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.avatar_box {
			width: 130px;
			height: 130px;
			border-radius: 50%;
			border: 1px solid #eee;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
		}

		.avatar_box img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}

		.login_form {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 0 20px;
			box-sizing: border-box;
		}

		.login_form .icon-showpassword {
			margin-right: 8px;
		}

		.btns {
			display: flex;
			justify-content: flex-end;
		}
	</style>
</head>

<body>
<div id="app">
	<div class="login_container">
		<div class="login_box">
			<!-- 头部区域 -->
			<div class="avatar_box">
				<img src="/img/logo.png" alt="" />
			</div>

			<!-- 表单区域 -->
			<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="0px" class="login_form">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
				</el-form-item>

				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" :type="pwdType">
						<i slot="suffix" class="iconfont icon-showpassword" @click="showPwd"></i>
					</el-input>
				</el-form-item>

				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</div>

<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
<script th:inline="javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            loginForm: {
                username: 'rzcoding',
                password: 'rzcoding'
            },

            loginRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                ]
            },

            pwdType: 'password'
        },

        methods: {
            showPwd() {
                if (this.pwdType === 'password') {
                    this.pwdType = ''
                } else {
                    this.pwdType = 'password'
                }
            },

            resetLoginForm() {
                this.$refs.loginFormRef.resetFields()
            },

            login() {
                this.$refs.loginFormRef.validate(async valid => {
                    if (!valid) {
                        return
                    }
                    const { data: resp } = await axios.post(`/oauth/login?username=${this.loginForm.username}&password=${this.loginForm.password}`)
                    //   console.log(resp);
                    alert(resp);
                })
            }
        }
    });
</script>
</body>
</html>